<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心</title>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1992971_c1dhs6uqoej.css">
    <script src="./js/echarts.min.js"></script>
    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            background-color: #eee;
        }
        html{
            font-size: 14px;
        }
        ul,li{
            list-style: none;
        }
        h1,h2,h3,h4,h5,h6{
            font-size: 14px;
            font-weight: normal;
        }
        i,em{
            font-style: normal;
        }
        b,strong{
            font-weight: normal;
        }
        a{
            text-decoration: none;
            color: #000;
        }
        input{
            outline: none;
        }
        button{
            border: none;
            outline: none;
        }

        /* 个人中心 */
        #me{
            width: 100%;
        }
        .me-con{
            width: 1000px;
            margin: 100px auto;
        }
        /* 头部 */
        .me-con dl{
            width: 990px;
            background-color: #fff;
            height: 60px;
            padding: 20px 0;
            border-left: 10px solid #25bb9b;
            display: flex;
            align-items: center;
            border-radius: 5px;
        }
        .me-con dl dd{
            width: 60px;
            height: 60px;
            border-radius: 50%;
            overflow: hidden;
            border: 1px solid #ddd;
            margin: 0 20px;
        }
        .headPhoto{
            width: 100%;
            height: 100%;
        }
        .me-con dt{
            position: relative;
            width:850px;
        }
        .exit{
            position: absolute;
            right: 15px;
            bottom: 10px;
            padding: 8px 10px;
            background-color: #16c2c2 ;
            color: #fff;
            border-radius: 3px;
        }
        .userName{
            color: #418ac3;
        }
        .icon-nan{
            color:#08c;
        }
        .introduce{
            margin-top: 10px;
            overflow: hidden;
            color: #333;
        }
        /* 内容 */
        .content{
            margin-top: 20px;
            overflow: hidden;
        }
        /* 左边 */
        .con-l{
            float: left;
            width: 257px;
            background-color: #fff;
            border-radius: 3px;
        }
        .active{
            background-color: #ddd;
            color: #25bb9b;
        }
        .con-l li{
            height: 40px;
            line-height: 40px;
            cursor: pointer;
        }
        .con-l li:hover{
            background-color: #ddd;
            color: #25bb9b;
        }
        .con-l li .iconfont:first-of-type{
            margin-left: 30px;
            float: left;
        }
        .con-l li b{
            margin-left: 20px;
            float: left;
        }
        .con-l li .iconfont:last-of-type{
            margin-right: 10px;
            float: right;
        }
        /* 右边 */
        .con-r{
            float: right;
            width: 688px;
            padding: 20px;
            background-color: #fff;
            border-radius: 3px;
        }
        /* 我的资料 */
        .myData-head{
            padding-bottom: 5px;
            border-bottom: 1px solid #d4d4d4;
            overflow: hidden;
        }
        .myData-head i{
            float: left;
            line-height: 30px;
        }
        .edit{
            float: right;
            padding: 10px 20px;
            background-color: #25bb9b;
            color: #fff;
            border-radius: 3px;
        }
        .edit:hover{
            background-color: #22ae90;
        }
        .myData-info{
            padding: 20px;
        }
        /* 编辑框 */
        .myData-info input[type="text"]{
            width: 400px;
            padding: 4px 10px;
        }
        .myData-info tr{
            font-size: 14px;
            height: 50px;
        }
        .myData-info tr td:first-of-type{
            text-align: right;
            padding-right: 20px;
        }
        .btn{
            display: none;
        }
        .btn button{
            padding: 5px 10px;
            border: 1px solid #ddd;
            border-radius: 3px;
        }
        .cancle{
            background-color: #fff;
            color: #25bb9b;
        }
        .preserve{
            background-color: #25bb9b;
            color: #fff;
        }
        .cancle:hover{
            background-color: #fff;
            color: #22ae90;
        }
        .preserve:hover{
            background-color: #22ae90;
            color: #fff;
        }


        /* 我的面经 */
        /* 头部 */
        .myExp h6{
            height: 22px;
            line-height: 22px;
            margin-bottom: 10px;
        }
        .myExp h6 label{
            float: left;
            margin-right: 5px;
        }
        #allChecked{
            transform: translateY(2px);
        }
        .myExp h6 em{
            float: left;
            color: #888;
            padding: 0 10px;
            font-size: 14px;
            line-height: 14px;
            margin: 3px 0;
            height: 14px;
            display: block;
            cursor: pointer;
        }
        .orderHeat{
            border-right: 1px solid #ddd;
        }
        .myExp h6 .focus{
            color: #16c2c2;
        }
        .deleteAll{
            float: right;
            padding: 3px 5px;
            border-radius: 3px;
            color: #fff;
            background-color: #ff411c;
            margin-right: 20px;
        }
        /* 我的面经列表 */
        .myExpTemplate{
            display: none;
        }
        .myExp-item{
            padding: 10px;
            border-bottom: 1px solid #ddd;
            margin-bottom: 20px;
            font-size: 14px;
            cursor: pointer;
        }
        .myExp-item:hover{
            box-shadow: 0 0 10px #ddd;
        }
        .myExp-item>a{
            display: inline-block;
            width: 100%;
        }
        .item-head{
            height: 28px;
            line-height: 28px;
            margin-bottom: 10px;
        }
        .item-checked{
            float: left;
            transform: translateY(8px);
            margin-right: 15px;
        }
        .title{
            float: left;
            font-size: 16px;
            cursor: pointer;
            color: #333;
            max-width: 200px;
            margin-right: 5px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .title:hover{
            color: #16c2c2;
        }
        .company,.post{
            border-radius: 12px;
            border: 1px solid #ddd;
            display: inline-block;
            padding: 2px 10px;
            color: #333;
            font-size: 12px;
            margin-right: 2px;
            background: #fff;
            margin-bottom: 5px;
            line-height: 16px;
            margin-left: 5px;
        }
        .company:hover,.post:hover{
            color: #16c2c2;
            border: 1px solid #16c2c2;
        }
        .item-btn{
            float: right;
        }
        .item-btn button{
            padding: 3px 5px;
            border-radius: 3px;
            color: #fff;
            margin-right: 10px;
        }
        .myExp-item-edit{
            background-color: #08c;
        }
        .myExp-item-delete{
            background-color: #ff411c;
        }
        .myExp-item-cancle{
            background-color: #e8ca2d;
            display: none;
        }
        .item-txt{
            font-size: 14px;
            color: #666;
            width: 96%;
            padding:0 2% 2%;
            outline: none;
            resize: none;
            border: none;
            background-color: #fff;
        }
        .exp_bottom{
            height: 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .exp_l{
            display: flex;
            align-items: center;
            font-size: 14px;
        }
        .exp_photo{
            width: 40px;
            height: 40px;
            border-radius: 50%;
            overflow: hidden;
        }
        .exp_photo img{
            width: 100%;
            height: 100%;
        }
        .exp_l i{
            margin: 0 10px 0 6px;
            color: #42c1a2;
        }
        .exp_l b{
            color: #aaa;
        }
        .exp_l strong{
            color: #aaa;
            margin-left: 5px;
        }
        .exp_r{
            display: flex;
            align-items: center;
            color: #999;
        }
        /* 点赞数 */
        .exp_like{
            margin-right: 20px;
        }
        .exp_like:hover,.exp_collect:hover{
            color: #16c2c2;
        }



        /* 收藏 */
        .myCollectTemplate{
            display: none;
        }
        .myCollect{
            display: none;
        }
        .myCollect-item{
            padding: 10px;
            border-bottom: 1px solid #ddd;
            margin-bottom: 20px;
            font-size: 14px;
            cursor: pointer;
        }
        .myCollect-item:hover{
            box-shadow: 0 0 10px #ddd;
        }
        .myCollect-item>a{
            display: inline-block;
            width: 100%;
        }
        .myCollect-item h2{
            font-size: 16px;
            cursor: pointer;
            color: #333;
            margin-bottom: 10px;
            
        }
        .myCollect-item h2:hover{
            color: #16c2c2;
        }
        .myCollect-item p{
            font-size: 14px;
            color: #999;
            line-height: 20px;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <!-- 个人中心 -->
    <div id="me">
        <div class="me-con">
            <!-- 头部 -->
            <dl>
                <dd>
                    <img class="headPhoto" src="https://images.nowcoder.com/head/921m.png?x-oss-process=image/resize,m_mfit,h_200,w_200" alt="">
                </dd>
                <dt>
                    <h2>
                        <i class="userName">大叔大婶多</i>
                        <span id="userSex" class="iconfont icon-nan"></span>
                    </h2>
                    <p class="introduce">这个人很懒，什么也没有留下</p>
                    <button class="exit">退出登录</button>
                </dt>
            </dl>
            <!-- 内容 -->
            <div class="content">
                <!-- 左边 -->
                <ul class="con-l">
                    <!-- <li>
                        <span class="iconfont icon-shouyekongxin"></span>
                        <b>首页</b>
                        <span class="iconfont icon-fanhui"></span>
                    </li> -->
                    <li class="myData-li active">
                        <span class="iconfont icon-ziliao"></span>
                        <b>基本资料</b>
                        <span class="iconfont icon-fanhui"></span>
                    </li>
                    <li class="myExp-li">
                        <span class="iconfont icon-wode"></span>
                        <b>我的面经</b>
                        <span class="iconfont icon-fanhui"></span>
                    </li>
                    <li class="myCollect-li">
                        <span class="iconfont icon-shoucang"></span>
                        <b>收藏</b>
                        <span class="iconfont icon-fanhui"></span>
                    </li>
                </ul>
                <!-- 右边 -->
                <ol class="con-r">
                    <!-- 我的资料 -->
                    <li class="myData">
                        <div class="myData-head">
                            <i>基本信息</i>
                            <button class="edit">编辑</button>
                        </div>
                        <table class="myData-info">
                            <tr>
                                <td>我的昵称</td>
                                <td><b class="name">水电费</b><a href="" style="margin-left: 10px;font-size: 12px;color: #16c2c2;">开通会员修改昵称</a></td>
                                
                            </tr>
                            <tr>
                                <td>我的性别</td>
                                <td><b class="sex"></b></td>
                            </tr>
                            <tr>
                                <td>我的简介</td>
                                <td>
                                    <b class="intro">这个人很懒，什么 也没有留下</b>
                                </td>
                            </tr>
                            <tr>
                                <td>居住地</td>
                                <td>
                                    <b class="city">陕西西安</b>
                                </td>        
                            </tr>
                            <tr>
                                <td>从事工作</td>
                                <td>
                                    <b class="work">格子衫</b>
                                </td>                                   
                            </tr>
                            <tr>
                                <td>学历</td>
                                <td>
                                    <b class="edu">小学</b>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2" class="btn">
                                    <button class="cancle">取消</button>
                                </td>
                            </tr>
                        </table>
                    </li>
                    <!-- 我的面经 -->
                    <li class="myExp">
                        <!-- 头部 -->
                        <h6>
                            <label for="allChecked">
                                <input type="checkbox" id="allChecked">
                                全选
                            </label>
                            <em class="orderHeat focus">按热度</em>
                            <em class="orderTime">按时间</em>
                            <button class="deleteAll">删除选中</button>
                        </h6>
                        <!-- 我的面经列表 -->
                        <div class="myExp-item myExpTemplate">
                            <a target="_blank">
                                <div class="item-head">
                                    <input type="checkbox" class="item-checked">
                                    <h2 class="title">猿辅导8.8面试经历（热乎）</h2>
                                    <b class="company">字节跳动</b>
                                    <strong class="post">前端开发</strong>
                                    <div class="item-btn">
                                        <button class="myExp-item-edit">编辑内容</button>
                                        <button class="myExp-item-delete">删除</button>
                                        <button class="myExp-item-cancle">取消</button>
                                    </div>
                                </div>
                                <textarea disabled class="item-txt"></textarea>
                            </a>
                            <div class="exp_bottom">
                                <div class="exp_l">
                                    <strong class="myExp-time">2020/08/10 11:15:24</strong>
                                </div>
                                <div class="exp_r">
                                    <!-- 点赞数 -->
                                    <div class="exp_like">
                                        <span class="iconfont icon-diancai1-copy-copy"></span>
                                        <i class="expLikeNum">10</i>
                                    </div>
                                    <!-- 收藏数 -->
                                    <div class="exp_collect">
                                        <span class="iconfont icon-star-filled"></span>
                                        <i class="expCollectNum">10</i>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </li>
                    <!-- 收藏 -->
                    <li class="myCollect">
                        <div class="myCollect-item myCollectTemplate">
                            <a target="_blank">
                                <h2 class="myCollectTitle">猿辅导8.8面试经历（热乎）</h2>
                                <p class="myCollectTxt"> </p>
                            </a>
                            <div class="exp_bottom">
                                <div class="exp_l">
                                    <div class="exp_photo">
                                        <img class="myCollectImg" src="./images/1.png" alt="">
                                    </div>
                                    <i class="myCollectName">救救孩子吧007</i>
                                    <strong class="myCollectTime">11:15:24</strong>
                                </div>
                                <div class="exp_r">
                                    <!-- 点赞数 -->
                                    <div class="exp_like">
                                        <span class="iconfont icon-diancai1-copy-copy"></span>
                                        <i class="myCollectL">10</i>
                                    </div>
                                    <!-- 收藏数 -->
                                    <div class="exp_collect">
                                        <span class="iconfont icon-star-filled"></span>
                                        <i class="myCollectC">10</i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                </ol>
            </div>

        </div>
    </div>

    <script src="./js/jquery.min.js"></script>
    <script>
        // 获取个人中心，渲染页面
        getMe()
        function getMe(){
            $.ajax({
                url:"http://127.0.0.1:84/getMe",
                data:{
                    name:window.location.href.split("?")[1].split("=")[1]
                },
                success(data){
                    let list = JSON.parse(data)
                    list.forEach(item => {
                        // 个人中心头部
                        item.img ? $(".headPhoto").attr("src",item.img) : ""
                        $(".userName").html(item.userName)
                        // 基本信息
                        $(".name").html(item.userName)
                        // 性别
                        if(item.sex === 1){
                            $(".sex").html("男")
                            $("#userSex").removeClass().addClass("iconfont icon-nan")
                        }else{
                            if(item.sex === 0){
                                $(".sex").html("女")
                                $("#userSex").removeClass().addClass("iconfont icon-nv")
                            }else{
                                $(".sex").html("未设置")
                                $("#userSex").removeClass().html("未设置")
                            }
                        }
                        // 个人简介
                        if(item.intro){
                            $(".introduce").html(item.intro)
                            $(".intro").html(item.intro)
                        }else{
                            $(".introduce").html("这个人很懒，什么也没有留下")
                            $(".intro").html("这个人很懒，什么也没有留下")
                        }
                        // 居住地
                        item.city ? $(".city").html(item.city) : $(".city").html("未设置")
                        // 从事工作
                        item.work ? $(".work").html(item.work) : $(".work").html("未设置")
                        // 学历
                        item.edu ? $(".edu").html(item.edu) : $(".edu").html("未设置")
                    });
                }
            })
        }
        // 退出登录
        $(".exit").click(function(){
            if(confirm("确认退出登录吗")){
                window.location.href = "http://127.0.0.1:84"
                localStorage.clear()
            }
        })
        // 点击左侧列表切换右侧
        $(".con-l li").click(function(event){
            $(".con-l li").removeClass("active")
            $(this).addClass("active")
        })
        $(".myData-li").click(function(){
            $(".con-r li").hide()
            $(".myData").fadeIn()
        })
        $(".myExp-li").click(function(){
            $(".con-r li").hide()
            $(".myExp").fadeIn()
        })
        $(".myCollect-li").click(function(){
            $(".con-r li").hide()
            $(".myCollect").fadeIn()
        })
        // 编辑个人信息
        $(".edit").click(function(){
            // 加一个类名，记录点击显示编辑框
            $(this).toggleClass("clickShow")
            $(".btn").toggle()
            if($(this).hasClass("clickShow")){
                $(this).html("保存")
                // // 姓名
                // $(`<input type="text" value="${$(".name").html()}">`).appendTo($(".name").closest("td"))
                // $(".name").empty()
                // 性别
                $(`
                <input type="radio" id="man" name="sex"><lable for="man">男</lable>
                <input type="radio" id="woman" name="sex"><lable for="woman">女</lable>
                `).appendTo($(".sex").closest("td"))
                if($(".sex").html() === "女"){
                    $("#woman")[0].checked= "checked"
                }else{
                    $("#man")[0].checked= "checked"
                }
                $(".sex").empty()
                // 简介
                $(`<input type="text" value="${$(".intro").html()}">`).appendTo($(".intro").closest("td"))
                $(".intro").empty()
                // 居住地
                $(`<input type="text" value="${$(".city").html()}">`).appendTo($(".city").closest("td"))
                $(".city").empty()
                // 从事工作
                $(`<input type="text" value="${$(".work").html()}">`).appendTo($(".work").closest("td"))
                $(".work").empty()
                // 学历
                $(`<select>
                        <option>博士</option>
                        <option>硕士</option>
                        <option>本科</option>
                        <option>专科</option>
                    </select>`).appendTo($(".edu").closest("td"))
                $(".edu").closest("td").find("select").val(`${$(".edu").html()}`)
                $(".edu").empty()

            }
            // 再次点击保存个人信息
            else{
                $(this).html("编辑")
                // // 姓名
                // $(".name").html($(".name").closest("td").find("input").val())
                // $(".name").closest("td").find("input").remove()
                // 性别
                // console.log($(".sex").closest("td").find('input[name="sex"]:checked').next().html())
                $(".sex").html($(".sex").closest("td").find('input[name="sex"]:checked').next().html())
                if($(".sex").html() === "男"){
                    $("#userSex").removeClass().addClass("iconfont icon-nan")
                }
                if($(".sex").html() === "女"){
                    $("#userSex").removeClass().addClass("iconfont icon-nv")
                }
                $(".sex").closest("td").find("input").remove()
                $(".sex").closest("td").find("lable").remove()
                // 简介
                $(".intro").html($(".intro").closest("td").find("input").val())
                $(".introduce").html($(".intro").closest("td").find("input").val())
                $(".intro").closest("td").find("input").remove()
                // 居住地
                $(".city").html($(".city").closest("td").find("input").val())
                $(".city").closest("td").find("input").remove()
                // 从事工作
                $(".work").html($(".work").closest("td").find("input").val())
                $(".work").closest("td").find("input").remove()
                // 学历
                // console.log($(".edu").closest("td").find('option:checked').val())
                $(".edu").html($(".edu").closest("td").find('option:checked').val())
                $(".edu").closest("td").find("select").remove()
                $(".edu").closest("td").find("option").remove()
                
                $.ajax({
                    url:"http://127.0.0.1:84/reviseInfo",
                    data:{
                        userName:window.location.href.split("?")[1].split("=")[1],
                        name:$(".name").html(),
                        sex:$(".sex").html() === "男" ? 1 : 0,
                        intro:$(".intro").html(),
                        city:$(".city").html(),
                        work:$(".work").html(),
                        edu:$(".edu").html(),
                    },
                    success(data){
                        alert(data)
                    }
                })

            }
        })
        //点击取消个人信息
        $(".cancle").click(function(){
            $(".edit").removeClass("clickShow").html("编辑")
            $(".btn").hide()
            getMe()

            $(".sex").closest("td").find("input").remove()
            $(".sex").closest("td").find("lable").remove()
            $(".intro").closest("td").find("input").remove()
            $(".city").closest("td").find("input").remove()
            $(".work").closest("td").find("input").remove()
            $(".edu").closest("td").find("select").remove()
            $(".edu").closest("td").find("option").remove()
        })

        // 我的面经
        // 初始化，渲染列表
        $.ajax({
            url:"http://127.0.0.1:84/getMyExp",
            data:{
                way:"likes",
                username:window.location.href.split("?")[1].split("=")[1]
            },
            success(data){
                let list = JSON.parse(data)
                let template = $(".myExpTemplate")
                
                list.forEach(item => {
                    let newDiv = template.clone(true)
                    newDiv.removeClass("myExpTemplate")
                    $(".myExp").append(newDiv)

                    newDiv.attr("data-index",item.id)
                    newDiv.find(".title").html(item.title)
                    newDiv.find(".item-txt").html(item.txt)
                    item.com ? newDiv.find(".company").html(item.com) : newDiv.find(".company").hide()
                    item.post ? newDiv.find(".post").html(item.post) : newDiv.find(".post").hide()
                    newDiv.find(".myExp-time").html(item.times)
                    newDiv.find(".expLikeNum").html(item.likes)
                    newDiv.find(".expCollectNum").html(item.collect)
                    // textarea 高度由内容撑开
                    newDiv.find(".item-txt").each(function () {
                        this.setAttribute('style', 'height:' + (this.scrollHeight) + 'px;overflow-y:hidden;');
                    }).on('input', function () {
                        this.style.height = 'auto';
                        this.style.height = (this.scrollHeight) + 'px';
                    });
                });
                //页面渲染完成后再影藏我的面经!!!!，否则textarea的scrollheight没有高度
                $(".myExp").hide()
            }
        })
        function draw(way){
            $.ajax({
                url:"http://127.0.0.1:84/getMyExp",
                data:{
                    way,
                    username:window.location.href.split("?")[1].split("=")[1]
                },
                success(data){
                    // 排序重新获取数据渲染，先清空之前的
                    $(".myExpTemplate").removeClass("myExp-item")
                    $(".myExp-item").remove()
                    $(".myExpTemplate").addClass("myExp-item")

                    let list = JSON.parse(data)
                    let template = $(".myExpTemplate")
                    
                    list.forEach(item => {
                        let newDiv = template.clone(true)
                        newDiv.removeClass("myExpTemplate")
                        $(".myExp").append(newDiv)

                        newDiv.attr("data-index",item.id)
                        newDiv.find(".title").html(item.title)
                        newDiv.find(".item-txt").html(item.txt)
                        item.com ? newDiv.find(".company").html(item.com) : newDiv.find(".company").hide()
                        item.post ? newDiv.find(".post").html(item.post) : newDiv.find(".post").hide()
                        newDiv.find(".myExp-time").html(item.times)
                        newDiv.find(".expLikeNum").html(item.likes)
                        newDiv.find(".expCollectNum").html(item.collect)
                        // textarea 高度由内容撑开
                        newDiv.find(".item-txt").each(function () {
                            this.setAttribute('style', 'height:' + (this.scrollHeight) + 'px;overflow-y:hidden;');
                        }).on('input', function () {
                            this.style.height = 'auto';
                            this.style.height = (this.scrollHeight) + 'px';
                        });
                    });
                }
            })
        }
        // 排序
        $(".orderHeat").click(function(){
            $(".orderTime").removeClass("focus")
            $(this).addClass("focus")
            draw("likes")
        })
        $(".orderTime").click(function(){
            $(".orderHeat").removeClass("focus")
            $(this).addClass("focus")
            draw("times")
        })
        // 全选
        $("#allChecked").click(function(){
            if(this.checked){
                $(".myExp .item-checked").prop("checked","true")
            }else{
                $(".myExp .item-checked").removeAttr("checked")
            }
        })
        $(".myExp .item-checked").click(function(){
            let isChecked = true //选中
            for(let i = 1;i < $(".myExp .item-checked").length;i++){
                if(!$(".myExp .item-checked")[i].checked){
                    isChecked = false
                }
            }
            if(isChecked){
                $("#allChecked").prop("checked","true")
            }else{
                $("#allChecked").removeAttr("checked")
            }
        })
        // 删除
        $(".myExp-item-delete").click(function(){
            if(confirm("确认删除这条面经吗？")){
                $.ajax({
                    url:"http://127.0.0.1:84/deleteMyExp",
                    data:{
                        id:$(this).closest(".myExp-item").attr("data-index")
                    },
                    success(data){
                        alert(data)
                    }
                })
                $(this).closest(".myExp-item").slideUp()
            }
        })
        // 编辑
        $(".myExp-item-edit").click(function(){
            // 加一个类名，记录点击显示编辑框
            $(this).toggleClass("editMyExp")
            $(this).closest(".item-btn").find(".myExp-item-cancle").toggle()
            $(this).closest(".item-btn").find(".myExp-item-delete").toggle()
            if($(this).hasClass("editMyExp")){
                $(this).html("保存")
                // 其他面经的内容不可编辑
                //？？？
                $('.item-txt').attr("disable","disable").css({
                    border:"none"
                })
                $(this).closest("a").find('.item-txt').removeAttr("disabled").css({
                    border:"1px solid #ddd"
                }).focus()

            }
            // 再次点击保存
            else{
                $(this).html("编辑内容")
                $('.item-txt').attr("disable","disable").css({
                    border:"none"
                })
                if($(this).closest("a").find(".item-txt").val() == $(this).closest("a").find(".item-txt").html()){
                    alert("面经内容没有改动")
                }
                else{
                    $.ajax({
                        url:"http://127.0.0.1:84/reviseMyExp",
                        method:"POST",
                        data:{
                            // textarea获取内容，val()!!!!!!
                            // !!!
                            txt:$(this).closest("a").find(".item-txt").val(),
                            id:$(this).closest(".myExp-item").attr("data-index"),
                        },
                        success(data){
                            alert(data)
                        }
                    })

                }

            }
        })
        // 取消保存 我的面经的编辑
        $(".myExp-item-cancle").click(function(){
            $(this).closest(".item-btn").find(".myExp-item-edit").html("编辑内容")
            $(this).hide()
            $(this).closest(".item-btn").find(".myExp-item-delete").show()
            $('.item-txt').attr("disable","disable").css({
                border:"none"
            })
            draw("likes")
            // window.location.reload()
        })
        // 删除选中
        $(".deleteAll").click(function(){
            let check = $(".item-checked")
            if(confirm("确认删除选中面经吗？请谨慎操作!")){
                for(let i = 1;i < check.length;i++){
                    if(check[i].checked){
                       $(check[i]).closest(".myExp-item").slideUp()
                       $.ajax({
                           url:"http://127.0.0.1:84/deleteMyExp",
                           data:{
                               id:$(check[i]).closest(".myExp-item").attr("data-index")
                           },
                           success(data){

                            }
                        })
                    }
                }
            }
        })

        // 我的收藏
        $.ajax({
            url:"http://127.0.0.1:84/getMyCollect",
            data:{
                username:window.location.href.split("?")[1].split("=")[1]
            },
            success(data){
                let list = JSON.parse(data)
                let template = $(".myCollectTemplate")
                
                list.forEach(item => {
                    let newDiv = template.clone(true)
                    newDiv.removeClass("myCollectTemplate")
                    $(".myCollect").append(newDiv)

                    newDiv.attr("data-index",item.id)
                    newDiv.find(".myCollectTitle").html(item.title)
                    newDiv.find(".myCollectTxt").html(item.txt)
                    newDiv.find(".myCollectImg").attr("src",item.headphoto)
                    newDiv.find(".myCollectName").html(item.name)
                    newDiv.find(".myCollectTime").html(item.times)
                    newDiv.find(".myCollectL").html(item.likes)
                    newDiv.find(".myCollectC").html(item.collect)
                });
            }
        })
    </script>
</body>
</html>